デザイナーヘルプツール InVision と Sketch の合体技

#デザイン

たなかゆきこ

2017.12.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

デザイナーのたなかゆきこです。

いまさら感はあるのですが、デザイナーとエンジニアのコミュニケーションに役立つ InVision の導入方法について記載していきます。InVision Studio、InVision Design System Manager、Design Forward Fundなど充実していっている InVision です。

Adobe XD や Zeplin 等ツールは色々ありますが、現在の自分や周囲の状況で臨機応変に対応するのがよいと思ってます。あくまで、道具＝ツールです。デザイナーにとって重要なのは、ツールを使う技術ではなくて、便利なツールを使うことでオペレーション時間を削減して、デザインを考える時間を増やすことです。

InVision のよさ

デザイナーにとっては Sketch のデータをそのままアップできることが最大のメリットです。デザイン定義書をpdfで渡すなどの必要がありません（最終的に自分のためにもつくることを推奨しますが別の話）。

エンジニアからみたメリットは、inVishonをみて、色や余白などを確認できることです。

確認できる情報

色
高さ・横幅
ほかオブジェクトの距離
角丸
透過

ちょっとしたことなんですが、「ここって何色」「余白ってどうなってる」を自分で確認できることが楽とのことでした。

デザイナーの目には、赤をまぜた灰色・真っ黒ではない黒が認識できていても、「赤をまぜた灰色」と「灰色」の差はわかりにくいという事実があります。「色には温度がある」という言葉は、デザイン系の人々には通用しますが、難しいこともあるのが現実です。

InVision のアカウントをつくろう

https://www.invisionapp.com/

右上の「SIGN UP FREE」から登録しましょう。無料プランでは、プロジェクトが１個作れます。

あとは、メールアドレスなど入力しましょう。それでアカウント登録完成です。

プロジェクトをつくろう

＋ボタンをクリックでプロジェクト作成ができます。

Sketch からデータをアップするので、PROTOTYPE を選択します。UPLOAD SCREENS は、Sketch があるのでほぼ使わないです。

プロジェクトの名前をつけたら、Sketch へ移動しましょう。

Sketch からの同期

同期は、InVision が公式で出している Sketch Plugin 「CRAFT」を使います。

https://www.invisionapp.com/craft

ダウンロードしてインストールをしましょう。インストールが完了したら、Sketch は一度アプリケーションを終了させて再起動しましょう。初心者みたいですが、「ダウンロードしたのにでないのはなぜだ」ということをやってしまいました。

一番上をタップすると、サインインを促す画面がでますので、先ほど作ったアカウントを入れます。

ログインすると、InVision で作成したプロジェクトを選択することができます。

「sync to InVision」をクリックすれば登録したプロジェクトに同期ができます。

最後に、Sketch にデザインガイドを

InVision をせっかくエンジニアさんへ共有できるのですから、Sketch の Pages にデザインガイドを作成すると自分も助かるので二重の意味で楽になると思います。

デザインガイド

最初に、「タイポグラフィ」と「色」を作成することにしています。

タイポグラフィ情報

項目	例
StyleName	Headline Bold
size	Bold 26 pt/sp
Font	ヒラギノ書体, Helvecicaが彩り 0123456789ABCDEFG

色

項目	例
ColorName	Light Gray
code(RGB)	#DDDDDD（R221 G221 B255）

色の名前は、考える時間が惜しいので、だいたいこんなイメージでつけることにしています。

明るい・鮮やかな	bright	bright pink（鮮やかなピンク）
薄い	light	light yellow（薄い黄色）
淡い・白っぽい	pale	pale pink（薄いピンク）
深い	deep	deep green（深緑）
暗い	dark	dark blue（暗青色）
蛍色	fluorescent	fluorescent pink（蛍色ピンク）